<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司应用商店管理平台</title>

    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                        'light-3': '#C9CDD4'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 cursor-pointer;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .sidebar-item:hover:not(.active) {
                @apply bg-light-1;
            }
            .card {
                @apply bg-white rounded-xl shadow-sm border border-light-2 p-5 transition-all duration-300 hover:shadow-md;
            }
            .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 active:bg-primary/80;
            }
            .btn-outline {
                @apply border border-light-2 hover:border-primary hover:text-primary;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
        }
    </style>
</head>
<body class="font-inter bg-light-1 text-dark min-h-screen flex overflow-hidden">
<!-- 侧边栏 -->
<aside id="sidebar" class="w-64 bg-white h-screen border-r border-light-2 transition-all duration-300 ease-in-out z-20">
    <div class="p-5 border-b border-light-2">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
                <i class="fa fa-th-large text-xl"></i>
            </div>
            <h1 class="text-xl font-bold">应用商店管理</h1>
        </div>
    </div>

    <div class="py-4">
        <nav class="px-3 space-y-1">
            <p class="px-4 text-xs text-dark-2 uppercase font-medium mb-2">主要功能</p>

            <div class="sidebar-item active">
                <i class="fa fa-tachometer w-5 text-center"></i>
                <span>控制台</span>
            </div>

            <a href="/temp/app_management" class="sidebar-item">
                <i class="fa fa-th w-5 text-center"></i>
                <span>应用管理</span>
            </a>

            <div class="sidebar-item">
                <i class="fa fa-users w-5 text-center"></i>
                <span>用户管理</span>
            </div>

            <div class="sidebar-item">
                <i class="fa fa-download w-5 text-center"></i>
                <span>下载统计</span>
            </div>

            <div class="sidebar-item">
                <i class="fa fa-comment w-5 text-center"></i>
                <span>评论管理</span>
            </div>

            <p class="px-4 text-xs text-dark-2 uppercase font-medium mb-2 mt-6">系统设置</p>

            <div class="sidebar-item">
                <i class="fa fa-cog w-5 text-center"></i>
                <span>设置</span>
            </div>

            <div class="sidebar-item">
                <i class="fa fa-question-circle w-5 text-center"></i>
                <span>帮助中心</span>
            </div>
        </nav>
    </div>

    <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-light-2 bg-white">
        <div class="flex items-center gap-3">
            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
            <div>
                <p class="font-medium text-sm">管理员</p>
                <p class="text-xs text-dark-2">admin@company.com</p>
            </div>
            <button class="ml-auto text-dark-2 hover:text-danger">
                <i class="fa fa-sign-out"></i>
            </button>
        </div>
    </div>
</aside>

<!-- 主内容区 -->
<main class="flex-1 flex flex-col overflow-hidden">
    <!-- 顶部导航栏 -->
    <header class="h-16 bg-white border-b border-light-2 flex items-center justify-between px-6 z-10">
        <div class="flex items-center gap-4">
            <button id="sidebar-toggle" class="lg:hidden text-dark-2 hover:text-primary">
                <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="relative w-64">
                <input type="text" placeholder="搜索应用、用户..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-light-2 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-dark-2"></i>
            </div>
        </div>

        <div class="flex items-center gap-5">
            <button class="relative text-dark-2 hover:text-primary transition-colors">
                <i class="fa fa-bell text-xl"></i>
                <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
            </button>

            <button class="relative text-dark-2 hover:text-primary transition-colors">
                <i class="fa fa-envelope text-xl"></i>
                <span class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center">5</span>
            </button>

            <div class="h-8 w-px bg-light-2"></div>

            <div class="flex items-center gap-3">
                <div class="hidden md:block">
                    <p class="font-medium text-sm">管理员</p>
                    <p class="text-xs text-dark-2">在线</p>
                </div>
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-9 h-9 rounded-full object-cover border-2 border-white shadow-sm">
            </div>
        </div>
    </header>

    <!-- 内容滚动区域 -->
    <div class="flex-1 overflow-y-auto p-6 bg-light-1">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">控制台</h2>
            <p class="text-dark-2">欢迎回来，这里是您的应用商店概览</p>
        </div>

        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="card">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-dark-2 text-sm mb-1">总应用数</p>
                        <h3 class="text-3xl font-bold mb-2">24</h3>
                        <p class="text-success text-xs flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 较上月增长 12%
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-th-large text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-dark-2 text-sm mb-1">总下载量</p>
                        <h3 class="text-3xl font-bold mb-2">1,842</h3>
                        <p class="text-success text-xs flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 较上月增长 8%
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
                        <i class="fa fa-download text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-dark-2 text-sm mb-1">活跃用户</p>
                        <h3 class="text-3xl font-bold mb-2">356</h3>
                        <p class="text-danger text-xs flex items-center">
                            <i class="fa fa-arrow-down mr-1"></i> 较上月下降 3%
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
                        <i class="fa fa-users text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-dark-2 text-sm mb-1">平均评分</p>
                        <h3 class="text-3xl font-bold mb-2">4.7</h3>
                        <p class="text-success text-xs flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 较上月增长 0.2
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                        <i class="fa fa-star text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表和最近活动 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <div class="card lg:col-span-2">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="font-bold text-lg">下载趋势</h3>
                    <div class="flex gap-2">
                        <button class="btn btn-outline text-sm py-1">周</button>
                        <button class="btn btn-primary text-sm py-1">月</button>
                        <button class="btn btn-outline text-sm py-1">年</button>
                    </div>
                </div>
                <div class="h-80">
                    <canvas id="downloadChart"></canvas>
                </div>
            </div>

            <div class="card">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="font-bold text-lg">应用分类</h3>
                    <button class="text-primary hover:text-primary/80 text-sm">查看全部</button>
                </div>
                <div class="h-80">
                    <canvas id="categoryChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 最近应用和待处理事项 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 最近添加的应用 -->
            <div class="card lg:col-span-2">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="font-bold text-lg">最近添加的应用</h3>
                    <button class="btn btn-primary text-sm">
                        <i class="fa fa-plus"></i> 添加应用
                    </button>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full min-w-[640px]">
                        <thead>
                        <tr class="border-b border-light-2">
                            <th class="text-left py-3 px-4 text-dark-2 font-medium">应用名称</th>
                            <th class="text-left py-3 px-4 text-dark-2 font-medium">分类</th>
                            <th class="text-left py-3 px-4 text-dark-2 font-medium">版本</th>
                            <th class="text-left py-3 px-4 text-dark-2 font-medium">下载量</th>
                            <th class="text-left py-3 px-4 text-dark-2 font-medium">评分</th>
                            <th class="text-left py-3 px-4 text-dark-2 font-medium">状态</th>
                            <th class="text-right py-3 px-4 text-dark-2 font-medium">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                            <td class="py-4 px-4">
                                <div class="flex items-center gap-3">
                                    <img src="https://picsum.photos/id/1/48/48" alt="项目管理工具" class="w-10 h-10 rounded-lg object-cover">
                                    <span class="font-medium">项目管理工具</span>
                                </div>
                            </td>
                            <td class="py-4 px-4 text-dark-2">生产力</td>
                            <td class="py-4 px-4 text-dark-2">2.3.1</td>
                            <td class="py-4 px-4 text-dark-2">342</td>
                            <td class="py-4 px-4">
                                <div class="flex items-center">
                                    <div class="text-warning mr-1">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                    </div>
                                    <span class="text-dark-2 text-sm">4.5</span>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="badge bg-success/10 text-success">已发布</span>
                            </td>
                            <td class="py-4 px-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <button class="text-primary hover:text-primary/80" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-dark-2 hover:text-danger" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                            <td class="py-4 px-4">
                                <div class="flex items-center gap-3">
                                    <img src="https://picsum.photos/id/2/48/48" alt="企业通讯" class="w-10 h-10 rounded-lg object-cover">
                                    <span class="font-medium">企业通讯</span>
                                </div>
                            </td>
                            <td class="py-4 px-4 text-dark-2">通讯</td>
                            <td class="py-4 px-4 text-dark-2">3.1.0</td>
                            <td class="py-4 px-4 text-dark-2">567</td>
                            <td class="py-4 px-4">
                                <div class="flex items-center">
                                    <div class="text-warning mr-1">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                    </div>
                                    <span class="text-dark-2 text-sm">4.0</span>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="badge bg-success/10 text-success">已发布</span>
                            </td>
                            <td class="py-4 px-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <button class="text-primary hover:text-primary/80" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-dark-2 hover:text-danger" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                            <td class="py-4 px-4">
                                <div class="flex items-center gap-3">
                                    <img src="https://picsum.photos/id/3/48/48" alt="文档协作" class="w-10 h-10 rounded-lg object-cover">
                                    <span class="font-medium">文档协作</span>
                                </div>
                            </td>
                            <td class="py-4 px-4 text-dark-2">生产力</td>
                            <td class="py-4 px-4 text-dark-2">1.8.2</td>
                            <td class="py-4 px-4 text-dark-2">289</td>
                            <td class="py-4 px-4">
                                <div class="flex items-center">
                                    <div class="text-warning mr-1">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <span class="text-dark-2 text-sm">5.0</span>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="badge bg-success/10 text-success">已发布</span>
                            </td>
                            <td class="py-4 px-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <button class="text-primary hover:text-primary/80" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-dark-2 hover:text-danger" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="hover:bg-light-1/50 transition-colors">
                            <td class="py-4 px-4">
                                <div class="flex items-center gap-3">
                                    <img src="https://picsum.photos/id/4/48/48" alt="财务分析工具" class="w-10 h-10 rounded-lg object-cover">
                                    <span class="font-medium">财务分析工具</span>
                                </div>
                            </td>
                            <td class="py-4 px-4 text-dark-2">商务</td>
                            <td class="py-4 px-4 text-dark-2">0.9.5</td>
                            <td class="py-4 px-4 text-dark-2">42</td>
                            <td class="py-4 px-4">
                                <div class="flex items-center">
                                    <div class="text-warning mr-1">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <i class="fa fa-star-o"></i>
                                    </div>
                                    <span class="text-dark-2 text-sm">3.0</span>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="badge bg-warning/10 text-warning">测试中</span>
                            </td>
                            <td class="py-4 px-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <button class="text-primary hover:text-primary/80" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-dark-2 hover:text-danger" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="mt-4 flex items-center justify-between">
                    <p class="text-sm text-dark-2">显示 1 到 4 条，共 24 条</p>
                    <div class="flex gap-1">
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 text-dark-2 hover:border-primary hover:text-primary disabled:opacity-50 disabled:pointer-events-none" disabled>
                            <i class="fa fa-chevron-left text-xs"></i>
                        </button>
                        <button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-white">1</button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary">2</button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary">3</button>
                        <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 text-dark-2 hover:border-primary hover:text-primary">
                            <i class="fa fa-chevron-right text-xs"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 待处理事项 -->
            <div class="card">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="font-bold text-lg">待处理事项</h3>
                    <span class="badge bg-danger/10 text-danger">5 项待处理</span>
                </div>

                <div class="space-y-4">
                    <div class="p-3 border border-light-2 rounded-lg hover:border-primary/50 hover:bg-primary/5 transition-all cursor-pointer">
                        <div class="flex items-start justify-between">
                            <p class="font-medium text-sm">应用更新审核 - 企业通讯 v3.2.0</p>
                            <span class="text-xs text-dark-2">2小时前</span>
                        </div>
                        <p class="text-xs text-dark-2 mt-1">需要审核新版本的功能和安全性</p>
                    </div>

                    <div class="p-3 border border-light-2 rounded-lg hover:border-primary/50 hover:bg-primary/5 transition-all cursor-pointer">
                        <div class="flex items-start justify-between">
                            <p class="font-medium text-sm">用户投诉 - 文档协作</p>
                            <span class="text-xs text-dark-2">昨天</span>
                        </div>
                        <p class="text-xs text-dark-2 mt-1">有用户报告无法上传大型文件</p>
                    </div>

                    <div class="p-3 border border-light-2 rounded-lg hover:border-primary/50 hover:bg-primary/5 transition-all cursor-pointer">
                        <div class="flex items-start justify-between">
                            <p class="font-medium text-sm">新应用提交 - 人力资源管理</p>
                            <span class="text-xs text-dark-2">2天前</span>
                        </div>
                        <p class="text-xs text-dark-2 mt-1">需要审核新提交的人力资源管理应用</p>
                    </div>

                    <div class="p-3 border border-light-2 rounded-lg hover:border-primary/50 hover:bg-primary/5 transition-all cursor-pointer">
                        <div class="flex items-start justify-between">
                            <p class="font-medium text-sm">应用下架申请 - 旧版日历工具</p>
                            <span class="text-xs text-dark-2">3天前</span>
                        </div>
                        <p class="text-xs text-dark-2 mt-1">开发团队请求下架旧版日历工具</p>
                    </div>

                    <div class="p-3 border border-light-2 rounded-lg hover:border-primary/50 hover:bg-primary/5 transition-all cursor-pointer">
                        <div class="flex items-start justify-between">
                            <p class="font-medium text-sm">系统维护计划</p>
                            <span class="text-xs text-dark-2">1周前</span>
                        </div>
                        <p class="text-xs text-dark-2 mt-1">需要安排下季度的系统维护时间</p>
                    </div>
                </div>

                <button class="w-full mt-4 py-2 text-primary border border-primary/30 rounded-lg hover:bg-primary/5 transition-colors text-sm">
                    查看所有待处理事项
                </button>
            </div>
        </div>
    </div>
</main>

<!-- 应用详情模态框 (默认隐藏) -->
<div id="app-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="p-5 border-b border-light-2 flex items-center justify-between">
            <h3 class="font-bold text-lg">应用详情</h3>
            <button id="close-modal" class="text-dark-2 hover:text-danger">
                <i class="fa fa-times"></i>
            </button>
        </div>

        <div class="p-5">
            <!-- 模态框内容将通过JavaScript动态填充 -->
        </div>
    </div>
</div>

<script>
    // 侧边栏切换功能
    document.getElementById('sidebar-toggle').addEventListener('click', function() {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.toggle('-translate-x-full');
    });

    // 图表初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 下载趋势图表
        const downloadCtx = document.getElementById('downloadChart').getContext('2d');
        new Chart(downloadCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                datasets: [{
                    label: '下载量',
                    data: [65, 78, 52, 91, 85, 112, 130, 145, 132, 156, 178, 184],
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22, 93, 255, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 应用分类图表
        const categoryCtx = document.getElementById('categoryChart').getContext('2d');
        new Chart(categoryCtx, {
            type: 'doughnut',
            data: {
                labels: ['生产力', '通讯', '商务', '工具', '娱乐'],
                datasets: [{
                    data: [8, 5, 4, 5, 2],
                    backgroundColor: [
                        '#165DFF',
                        '#36CFC9',
                        '#FAAD14',
                        '#52C41A',
                        '#722ED1'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            boxWidth: 12
                        }
                    }
                },
                cutout: '70%'
            }
        });
    });

    // 模态框功能
    const modal = document.getElementById('app-modal');

    // 打开模态框的按钮（这里假设所有编辑按钮都能打开模态框）
    document.querySelectorAll('.fa-pencil').forEach(button => {
        button.parentElement.addEventListener('click', function() {
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.body.style.overflow = 'hidden';
        });
    });

    // 关闭模态框
    document.getElementById('close-modal').addEventListener('click', function() {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.body.style.overflow = 'auto';
    });

    // 点击模态框外部关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            document.body.style.overflow = 'auto';
        }
    });
</script>
</body>
</html>
